<template>
  <div>
    <BorderBox1>
       <div id="lineChart"></div>
    </BorderBox1>
  </div>
</template>
<script setup> 
  import {BorderBox1} from '@kjgl77/datav-vue3';
  import {defineProps,onMounted} from 'vue'
  import * as echarts from 'echarts'

  onMounted(()=>{
    makeLineChart();
  })
  let props=defineProps({
    seriseData:Array
  })

  let makeLineChart = () => {
     let mycharts=echarts.init(document.getElementById('lineChart'))
    // 2 准备配置项---------------------
    let option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
    itemStyle:{
      color:"#fff"
    },
    textStyle:{
      color:"#fff"
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: props.seriseData.map((item,index)=>{
  let  areaStyle={
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      }
    let nitem={
        areaStyle:areaStyle,
        name:item.name,
       data:item.data,
       type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      itemStyle:{
        color:"#fff"
      },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      }
    }
    return nitem
  })
   
  
};
// 配置设置给实例
// true 防止图片堆叠
  mycharts.setOption(option,true)


  }
  
</script>
<style lang="scss" scoped>
  #lineChart{
    width: 480px;
    height: 300px;
    padding: 40px;
    box-sizing: border-box;
  }
</style>